<template>
  <div class="popup pwdChangePopup flex-center flex-align-items-center">
    <div class="main">
      <div class="title flex-between flex-align-items-center">
        <div class="title-fl">修改密码</div>
        <CloseOutlined class="title-fr" @click="pwdPopupShowChange" />
      </div>
      <a-config-provider :locale="zhCN">
        <a-form @finish="pwdSubmit" :model="pwdForm">
          <div class="form-main">
            <a-form-item label="旧密码" name="oldPassword" :rules="[{ required: true, message: '请输入旧密码' }]">
              <a-input type="password" placeholder="请输入" v-model:value="pwdForm.oldPassword" />
            </a-form-item>
            <a-form-item label="新密码" name="newPassword" :rules="[{ required: true, validator: validatePass }]">
              <a-input type="password" placeholder="请输入" v-model:value="pwdForm.newPassword" />
            </a-form-item>
            <a-form-item label="密码确认" name="newPasswordConfirm" :rules="[{ required: true, validator: validatePass1 }]">
              <a-input type="password" placeholder="请输入" v-model:value="pwdForm.newPasswordConfirm" />
            </a-form-item>
          </div>
          <a-form-item class="form-btns">
            <div class="btns clear">
              <a-button type="primary" class="fr" html-type="submit">确定</a-button>
              <a-button class="fr" @click="pwdPopupShowChange">取消</a-button>
            </div>
          </a-form-item>
        </a-form>
      </a-config-provider>
    </div>
  </div>
</template>
<script setup>
import { defineEmits, ref } from "vue";
import zhCN from "ant-design-vue/lib/locale/zh_CN";
import { message } from "ant-design-vue";
import {
  CloseOutlined,
} from "@ant-design/icons-vue";

const emit = defineEmits(['close']);
let pwdForm = ref({
  oldPassword: "",
  newPassword: "",
  newPasswordConfirm: "",
});

// 显示或隐藏密码框
const pwdPopupShowChange = () => {
  emit("close");
};

// 验证新密码
const validatePass = (rule, value, callback) => {
  console.log(rule, value);
  let reg = /^(\d+[a-zA-Z]+|[a-zA-Z]+\d+)([0-9a-zA-Z]*)$/;
  if (!reg.test(value)) {
    callback(new Error("密码需包含数字和字母，字母区分大小写"));
  } else if (value.length < 8 || value.length > 16) {
    callback(new Error("密码长度为8至16位"));
  } else {
    callback();
  }
};

// 验证确认密码
const validatePass1 = (rule, value, callback) => {
  console.log(rule, value);
  if (pwdForm.value.newPassword !== pwdForm.value.newPasswordConfirm) {
    callback(new Error("两次密码输入不一致"));
  } else if (value.length < 8 || value.length > 16) {
    callback(new Error("密码长度为8至16位"));
  } else {
    callback();
  }
};

// 提交密码修改
const pwdSubmit = () => {
};
</script>
<style lang="less">
.pwdChangePopup {
  .main {
    width: 508px;
    border-radius: 8px;
    background: #fff;

    .title {
      height: 56px;
      padding: 0 24px;
      border-bottom: 1px solid #f0f0f0;

      .title-fl {
        font-size: 16px;
        color: #262626;
        font-weight: bold;
      }

      .title-fr {
        color: #bfbfbf;
        cursor: pointer;
      }
    }

    .ant-form {
      .form-main {
        padding: 32px 35px 38px;
      }

      .ant-form-item:last-child {
        margin-bottom: 0;
      }

      .ant-form-item-label {
        width: 110px;
      }

      .ant-form-item-control-input,
      .ant-picker {
        width: 328px;
      }

      .form-btns {
        margin-bottom: 0;

        .ant-form-item-control-input {
          width: 100%;
        }
      }
    }

    .btns {
      padding: 10px 24px;
      border-top: 1px solid #f0f0f0;

      .ant-btn {
        margin-left: 8px;
      }
    }
  }
}
</style>
